<template>
	<view class="box" >
		<!-- 模糊背景 -->
		<view class="dim-box" @click="closeDim"></view>
		
		<!-- 内容 -->
		<view class="dim-content">
			<view class="dim-content-clear"> 
				<u-icon name="trash" label="清空" size="30" @click="clearCar"></u-icon>
			</view>
			
			<view style="margin-top: 70rpx;">
				<view class="shopping-car" v-for="(item, index) in shopCar" :key="index">
					<image :src="$myRequire(item.obj.imagePath)"></image>
					
					<view class="shopping-car-right-box">
						
						<view class="shopping-car-title">{{ item.obj.name }}</view>
						
						<view class="price-num-box">
							<view class="price">{{ '￥' + item.obj.prePrice }}</view>
							
							<view class="icon-group">
								<view class="icon icon-dec" @click="dec(item.obj.id)">-</view>
								<view>{{ item.buy }}</view>
								<view class="icon icon-add" @click="add(item.obj.id)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		name: 'shop-dim',
		methods: {
			...mapMutations('car', ['dec', 'add', 'clearCar']),
			closeDim() {
				this.$emit('doCloseDim')
			}
		},
		computed: {
			...mapState('car', ['shopCar'])
		}
	}
</script>

<style>
	.box{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	
	.dim-box{
		width: 100%;
		height: 100%;
		background-color: #696969;
		opacity: 0.5;
	}
	
	.dim-content{
		overflow: scroll;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100rpx;
		width: 100%;
		max-height: 800rpx;
		background-color: #FFFFFF;
		border-radius: 17px 17px 0 0;
		
	}
	
	.dim-content-clear{
		position: fixed;
		display: flex;
		flex-direction: row-reverse;
		width: 100%;
		height: 70rpx;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		color: #696969;
		border-radius: 17px 17px 0 0;
		border-bottom: 1px solid #eeeeee;
		z-index: 101;
	}
	
	.shopping-car{
		display: flex;
		padding: 30rpx;
	}
	
	.shopping-car image{
		width: 130rpx;
		height: 130rpx;
	}
	
	.shopping-car-right-box{
		padding-left: 10px;
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
	}
	
	.price-num-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.shopping-car-title{
		font-weight: 600;
	}
	
	.price{
		color: #ff3703;
	}
	
	.icon-group{
		display: flex;
		align-items: center;
	}
	
	.icon{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
		margin: 0 10px;
		font-size: 20px;
		line-height: 17px;
		border-radius: 100%;
		padding-bottom: 1px;
	}
	
	.icon-dec{
		border: #b4b4b4 1px solid;
	}
	
	.icon-add{
		background-color: #FF3703;
		color: #FFFFFF;
	}

</style>
